<template>
	<div>
		<h1>数据统计</h1>
		<div id="total-tag">
			<el-tag>所有管理员:{{ totalData.admins }}</el-tag>
			<el-tag type="success">所有用户:{{ totalData.users }}</el-tag>
			<el-tag type="warning">所有订单:{{ totalData.orders }}</el-tag>
		</div>
		<div id="today-tag">
			<el-tag>今日新增管理员:{{ todayData.admins }}</el-tag>
			<el-tag type="success">今日新增用户:{{ todayData.users }}</el-tag>
			<el-tag type="warning">今日新增订单:{{ todayData.orders }}</el-tag>
		</div>
		<div class="block">
			<span class="demonstration">选择时间范围：</span>
			<el-date-picker
				v-model="timeQuantum"
				value-format="yyyy/M/d"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				:picker-options="pickerOptions"
			></el-date-picker>
		</div>
		<v-chart
			:force-fit="true"
			:height="height"
			:data="chartsData"
			:scale="scale"
		>
			<v-tooltip />
			<v-axis />
			<v-legend />
			<v-line position="date*amount" color="type" />
			<v-point
				position="date*amount"
				color="type"
				:size="4"
				:v-style="style"
				:shape="'circle'"
			/>
		</v-chart>
	</div>
</template>

<script>
import axios from "axios";
import DataSet from "@antv/data-set";
export default {
	data() {
		return {
			//模拟数据
			listData: [
				{ date: "2020/1/1", admins: 3, users: 9, orders: 4 },
				{ date: "2020/1/2", admins: 3, users: 19, orders: 9 },
				{ date: "2020/1/3", admins: 5, users: 30, orders: 18 },
				{ date: "2020/1/4", admins: 6, users: 49, orders: 29 },
				{ date: "2020/1/5", admins: 8, users: 70, orders: 38 },
				{ date: "2020/1/6", admins: 11, users: 99, orders: 66 },
				{ date: "2020/1/7", admins: 12, users: 110, orders: 58 },
				{ date: "2020/1/8", admins: 10, users: 142, orders: 109 },
				{ date: "2020/1/9", admins: 9, users: 152, orders: 120 },
				{ date: "2020/1/10", admins: 12, users: 167, orders: 110 },
				{ date: "2020/1/11", admins: 14, users: 180, orders: 127 },
				{ date: "2020/1/12", admins: 17, users: 201, orders: 129 }
			],
			todayData: { admins: 10, users: 900, orders: 4000 },
			totalData: { admins: 200, users: 18000, orders: 96000 },
			scale: [
				{
					dataKey: "date",
					range: [0.05, 0.95]
				}
			],
			height: 400,
			style: { stroke: "#fff", lineWidth: 1 },
			timeQuantum: ["2020/3/1", "2020/3/7"],
			pickerOptions: {
				disabledDate: time => {
					return (
						time.getTime() < this.timeLimit.start ||
						time.getTime() > this.timeLimit.end
					);
				}
			}
		};
	},
	mounted() {
		this.getChartsData();
	},
	computed: {
		chartsData() {
			return this.dataResolve(this.listData);
		},
		timeLimit() {
			return {
				start: Date.parse(this.listData[0].date),
				end: Date.parse(this.listData[this.listData.length - 1].date)
			};
		}
	},
	watch: {
		timeQuantum(value) {
			if (this.timeQuantum == null) this.timeQuantum = "";
		}
	},
	methods: {
		getChartsData() {
			axios
				.get("/totalStatistics", { params: { type: "list" } })
				.then(res => {
					console.log(res.data);
					this.listData = res.data;
				});
			axios
				.get("/totalStatistics", { params: { type: "today" } })
				.then(res => {
					console.log(res.data);
					this.todayData = res.data[0];
				});
			axios
				.get("/totalStatistics", { params: { type: "total" } })
				.then(res => {
					console.log(res.data);
					this.totalData = res.data[0];
				});
		},
		timeFilter(sourceData) {
			const [minDate, maxDate] = this.timeQuantum;
			const minTime = Date.parse(minDate);
			const maxTime = Date.parse(maxDate);
			return sourceData.filter(value => {
				const time = Date.parse(value.date);
				if (time >= minTime && time <= maxTime) {
					return true;
				} else {
					return false;
				}
			});
		},
		dataResolve(sourceData) {
			let dataFliter = this.timeFilter(sourceData);
			if (this.timeQuantum == "") {
				dataFliter = sourceData;
			}
			const dv = new DataSet.View().source(dataFliter);
			dv.transform({
				type: "rename",
				map: {
					admins: "管理员",
					users: "用户",
					orders: "订单"
				}
			});
			dv.transform({
				type: "fold",
				fields: ["管理员", "用户", "订单"],
				key: "type",
				value: "amount"
			});
			return dv.rows;
		}
	}
};
</script>

<style>
#total-tag > span,
#today-tag > span {
	display: inline-block;
	margin: 4px 4px;
	font-size: 1rem;
}
#today-tag > span {
	font-weight: 600;
}
</style>
